<template>
  <div class="allquestion" v-show="questionList">
    <div class="Header">
      <img src="../../assets/image/goBack.png" @click="goBack"/>
      <p>全部问答</p>
    </div>
    <div class="questionBox">
      <div class="imgBox">
        <img :src="shopDetail.SERVDETAIL_PHOTO" alt="">
      </div>
      <p>{{shopDetail.SERVDETAIL_NAME}}</p>
    </div>
    <!--回答列表-->
    <scroller class='myScroller' :on-infinite="infinite" ref="myScroller" :on-refresh="refresh">
      <div class="answerList">
        <div class="answerBox" v-for="item in questionList" @click="goQuestionDetail(item.QUESTION_ID)">
          <div class="qBox">
            <img class="qIcon" src="../../assets/image/question/question.png" alt="">
            <p>{{item.MESSAGE}}</p>
          </div>
          <div class="aBox" v-if="item.IS_ANSWER_STATUS">
            <img class="aIcon" src="../../assets/image/question/answer.png" alt="">
            <p class="name">{{item.ANSWER_DATE.USER_NAME| fiterPhone}}</p>
            <p class="content">{{item.ANSWER_DATE.MESSAGE}}</p>
            <div class="imgList">
              <img alt="" v-for="img in item.ANSWER_DATE.PHOTO_LIST" :src="img">

            </div>
            <p class="count">{{item.ANSWER_DATE.COUNT}}条回答<span class="data">{{item.QUESTION_TIME|filterTime5}}</span></p>
          </div>
          <div class="noAnswer" v-if="!item.IS_ANSWER_STATUS">

            暂无回答
            <span class="data">{{item.QUESTION_TIME|filterTime5}}</span>
          </div>
        </div>

      </div>
    </scroller>
    <div class="footer">
      <div class="btn" @click="goQuestion(shopId)">我要提问</div>
    </div>
  </div>
</template>
<script>
/*全部问答*/
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"allquestion",
  // 数据
  data(){

    return{
    	userId:'',
      shopId:this.$route.params.id,//问题Id;
      page:1,
      shopDetail:'',//商品数据
      questionList:'',//回答列表
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.$vux.loading.show({
      text: ''
    });
    this.userId=getCookie('loginkey');
    let obj ={};
    obj.SERV_ID =this.shopId;
    obj.PAGE_NO =this.page;
    obj.PAGE_SIZE =4;
    this.$fetchPost('serviceDetailQA/getServiceDetailQAList',obj).then(res=>{
        if(res.STATUS_CODE==1){
      this.$refs.myScroller.finishPullToRefresh();
          //console.log(res)
      this.$vux.loading.hide();
          this.shopDetail=res.SERVDETAIL_LIST;
          this.questionList=res.QUESTION_LIST;
       }
    },err=>{
      console.log(err)
    })

  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    infinite(){
      this.$refs.myScroller.finishInfinite();
    },
    refresh(){
      this.$refs.myScroller.finishPullToRefresh();
    },
    goBack(){
      this.$router.back(-1)
    },
    goQuestion(id){
      sessionStorage.setItem('aname',this.shopDetail.SERVDETAIL_NAME);
      sessionStorage.setItem('aimg',this.shopDetail.SERVDETAIL_PHOTO);
      this.$router.push('/doQuestion/'+id)
    },
    goQuestionDetail(id){
       this.$router.push('/questionDetail/'+id)
    }
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.allquestion{
  width: 7.5rem;
  height: 100%;
  overflow: hidden;
  background: #fff;
  .Header{
    position: fixed;
    top:0;
    z-index: 8;
    width: 100%;
    height:0.8rem;
    line-height:0.8rem;
    font-size:0.33rem;
    background: #ffffff;
    color:#222222;
    img{
      position: absolute;
      left: 0.22rem;
      bottom: 0.25rem;
      height: 0.38rem;
    }
  }
  .questionBox{
    position: fixed;
    z-index: 8;
    top:0.8rem;
    width: 100%;
    height: 1.7rem;
    background: #ffffff;
    border-bottom:0.2rem solid  #f5f5f5;
    .imgBox{
      position: absolute;
      width: 0.9rem;
      height: 0.9rem;
      left: 0.4rem;
      top:0.3rem;
      img{
        display: block;
        width:0.9rem;
        height: 0.9rem;
      }
    }
    p{
      padding-left:1.5rem;
      font-size:0.3rem;
      color:#222222;
      line-height:1.5rem;
      text-align: left;
    }
  }

  .answerList{
    background:#f5f5f5;
    .answerBox{
      text-align:left;
      background: #ffffff;
      border-bottom:0.2rem solid #f5f5f5;
      .qBox{
        padding-left: 0.82rem;
        padding-top:0.3rem;
        padding-bottom:0.2rem;
        padding-right:0.4rem;
        .qIcon{
          height: 0.42rem;
          width: 0.4rem;
          position: absolute;
          left: 0.3rem;
        }
        p{
          font-size: 0.29rem;
          color:#222222
        };
      }
      .noAnswer{
        font-size: 0.22rem;
        color: #999999;
        line-height: 0.6rem;
        padding-left: 0.82rem;
      }
      .aBox{
        padding-left: 0.82rem;
        padding-right:0.4rem;
        .aIcon{
          height: 0.42rem;
          width: 0.4rem;
          position: absolute;
          left: 0.3rem;
        }
        .name{
          font-size: 0.22rem;
          color: #222222;
        }
        .content{
          font-size:0.29rem;
          margin-top: 0.4rem;
          margin-bottom: 0.3rem;
        }
        .imgList{

          overflow:hidden;
          justify-content: space-between;
          img{
            width: 1.49rem;
            height:1.49rem;
            border-radius:0.05rem;
            margin-right:0.2rem
          }
        }
        .count{
          font-size: 0.22rem;
          color: #999999;
          padding:0.3rem 0 0.25rem;
          .data{
            font-size:0.18rem;
            float: right;
            margin-right: 0.33rem;
          }
        }

      }
    }
  }
  .footer{
    position: fixed;
    z-index: 9;
    height: 1.1rem;
    width:100%;
    bottom: 0;
    left:0;
    background: #ffffff;
    .btn{
      width: 2.8rem;
      height:0.7rem;
      background:#F22E2E;
      border-radius: 0.35rem;
      font-size:0.27rem;
      color: #ffffff;
      line-height:0.7rem;
      margin: 10px auto;
    }
  }
}
.noAnswer{
          font-size: 0.22rem;
          color: #999999;
          padding:0.3rem 0 0.25rem;
          .data{
            font-size:0.18rem;
            float: right;
            margin-right: 0.73rem;
          }
        }
.myScroller{
  padding-top:2.5rem;
  background:#f5f5f5;
}
.Header:after{
  content: '';
  position: absolute;
  bottom: 0 ;
  left:0 ;
  width: 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  height: 1px;
  background: #dddddd;
}
</style>
